<template>
  <div class="service-package-detail">
    <div class="header">
      <el-tag  v-if="auditStatus === 1">审核通过</el-tag>
      <el-tag type="danger" v-else-if="auditStatus === 2">已驳回</el-tag>
      <el-tag type="success"  v-else>待审核</el-tag>
      <h2>服务包详情</h2>
      <el-button v-if="quanxian===true"  @click="shenhe" style="margin-left: 500px;">审核</el-button>
      <el-button v-if="quanxian===true"  @click="bohui" type="danger" style="margin-left: 10px;">驳回</el-button>
    </div>
    <div class="package-info">
      <div class="package-image">
        <img :src="packageImage" alt="服务包图标">
      </div>
      <div class="package-details">
        <h3>{{ packageName }} 
          <el-tag type="warning" v-if="packageType === 1">初级包</el-tag>
          <el-tag type="success" v-else-if="packageType === 2">中级包</el-tag>
          <el-tag type="danger" v-else-if="packageType === 3">高级包</el-tag>
          <el-tag type="info" v-else-if="packageType === 4">特需定制包</el-tag>
        </h3>
        <p><span>订购定价</span> ¥{{ packagePrice }}</p>
        <p><span>标签</span>
          <el-tag v-for="(tag, index) in packageTags" :key="index" :type="tag.type" style="text-align: center;line-height: 23px;">{{ tag.name }}</el-tag>
        </p>
        <p><span>服务对象</span> {{ serviceTarget }}</p>
        <p><span>签约周期</span> {{ contractCycle }}</p>
        <p><span>服务介绍</span> <span v-html="serviceIntroduction" style="color: #000; width: 400px;"></span></p>
      </div>
    </div>
    <div class="service-items">
      <h3>服务项目</h3>
      <el-table :data="serviceItems" border>
        <el-table-column prop="itemId" label="项目编号"></el-table-column>
        <el-table-column prop="itemName" label="项目名称"></el-table-column>
        <el-table-column prop="frequency" label="次数"></el-table-column>
        <el-table-column prop="itemType" label="项目类型" >
          <template #default="scope">
          <dict-tag :options="item_type" :value="scope.row.itemType"/>
        </template>
        </el-table-column>
        <el-table-column prop="itemIntroduction" label="项目介绍">
        <template #default="scope">
          <p v-html="scope.row.itemIntroduction"></p>
        </template>
            
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>

import { ElTag, ElTable, ElTableColumn } from 'element-plus';
import {getDoctorSysUserId} from "@/api/system/doctor";
import { getPackage,updatePackage} from "@/api/package/package";
import { listItem} from "@/api/item/item";
import { listPackagetag2,listPackagetag } from '@/api/packagetag/packagetag';
import { useRoute } from 'vue-router';
import { onMounted, ref } from 'vue';
import useUserStore from '@/store/modules/user'
import { ElMessage } from 'element-plus'
const quanxian=ref(false)
const user = useUserStore();
  const route = useRoute();
  const rowData = route.query.rowData;
  const { proxy } = getCurrentInstance();
  const { item_type } = proxy.useDict('item_type');
  const package1 = ref({});

  onMounted(() => {
    getPackage1();
    getItem1();
    getPackageTag1();
    getDoctorSysUserId1();
    // console.log(user.roles)

  });
function getPackage1() {
  getPackage(rowData).then(response => {
      package1.value = response.data; 
      packageImage.value = package1.value.packageImage; // 假设返回的图片路径在data属性中
      packageName.value = package1.value.packageName; // 假设返回的服务包名称在data属性中
      packageType.value = package1.value.packageType; // 假设返回的服务包类型在data属性中
      contractCycle.value = package1.value.contractCycle; // 假设返回的签约周期在data属性中
      auditStatus.value = package1.value.auditStatus; // 假设返回的签约周期在data属性中
      serviceTarget.value = package1.value.serviceTarget; // 假设返回的服务对象在data属性中
      serviceIntroduction.value = package1.value.serviceIntroduction; // 假设返回的服务介绍在data属性中
      packagePrice.value = package1.value.price; // 假设返回的服务介绍在data属性中
    })
}
function getDoctorSysUserId1() {
  getDoctorSysUserId(rowData).then(response => {
      if(response.id==null){
        quanxian.value=true; 
      }
    }) 
}
function shenhe(){
  if(auditStatus.value==2){
    ElMessage({
    message: '已驳回',
    type: 'error',
    plain: true, 
    }) 
    return;
  } 
  if(auditStatus.value==1){
    ElMessage({
    message: '已审核通过',
    type: 'warning',
    plain: true,
  })
    return;
  }
  auditStatus.value=1;
  updatePackage({packageId:rowData,auditStatus:1}).then(response => {
    ElMessage({
    message: '审核成功',
    type: 'success',
    plain: true,
  })
  })
}

function bohui(){
  if(auditStatus.value==2){
    ElMessage({
    message: '已驳回',
    type: 'error',
    plain: true, 
    }) 
    return;
  } 
  auditStatus.value=2;
  updatePackage({packageId:rowData,auditStatus:2}).then(response => {
    ElMessage({
    message: '驳回成功',
    type: 'success',
    plain: true,
  })
  })
}

function getPackageTag1() {
  listPackagetag2(rowData).then(response => {
      for (let i = 0; i < response.rows.length; i++) {
        let packageId = response.rows[i].packageId;
        if(packageId==rowData){
          let shu=i%4;
          packageTags.value.push({ name: response.rows[i].homeServiceTagsList[0].tagName,type: packageTagsTypes[shu]});
        }
      }
    })
}
const packageTagsTypes= ["danger", "success", "warning", "info"];
function getItem1() {
  listItem().then(response => {
      serviceItems.value = response.rows; // 假设返回的服务项目列表在data属性中
    })
}
// 模拟数据
const auditStatus = ref(0);
const packageImage = ref(null); // 请替换为实际图标路径
const packageName = ref(null);
const packageType = ref(0);
const packagePrice = ref(0);
const packageTags = ref([]);
const serviceTarget = ref(null);
const contractCycle = ref(null);
const serviceIntroduction = ref('主要以基本医疗服务和公共卫生服务为主，如部分常见病或多发病的治疗和用药指导、重症的就医指导和转诊预约、居民健康档案的管理和慢病管理指导等。');
const serviceItems = ref([
  {
    id: '2021340001',
    name: '高血压随访服务',
    times: '2次',
    type: '免费项目',
    description: '1. 血压测量及记录 2. 根据结果提供综合性健康指导'
  },
  {
    id: '2021340001',
    name: '高血压随访服务',
    times: '2次',
    type: '免费项目',
    description: '1. 血压测量及记录 2. 根据结果提供综合性健康指导'
  },
  {
    id: '2021340001',
    name: '高血压随访服务',
    times: '2次',
    type: '免费项目',
    description: '1. 血压测量及记录 2. 根据结果提供综合性健康指导'
  }
]);
// function shenhe(){
  
// }
</script>

<style scoped>
.service-package-detail {
  padding: 20px;
}
.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.header h2 {
  margin-left: 10px;
}
.package-info {
  display: flex;
  margin-bottom: 20px;
}
.package-image {
  width: 200px;
  height: 150px;
  margin-right: 20px;
  background-color: #f4f4f5;
  display: flex;
  justify-content: center;
  align-items: center;
}
.package-image img {
  max-width: 100%;
  max-height: 100%;
}
.package-details {
  flex: 1;
}
.package-details h3 {
  margin-bottom: 10px;
}
.package-details p {
  margin-bottom: 5px;
  
}
.package-details p span {
    display: inline-block;
    width: 80px;
    color: #606266;
  }
.service-items h3 {
  margin-bottom: 10px;
}
</style>
  